<template>
  <div class="step-container">
    <h1>Planning</h1>
    <el-steps style="margin-left: 36px; width: 100%" :active="step">
      <el-step title="Step 1" description="设置排班时段" />
      <el-step title="Step 2" description="设置席位时间" />
      <el-step title="Step 3" description="配置值班人员" />
      <el-step title="Step 4" description="指定值班时段" />
      <el-step title="Step 5" description="？？？" />
    </el-steps>
  </div>
</template>

<script setup>
import usePlanningStore from "@/stores/planningStore";

const planningStore = usePlanningStore();
const step = computed(() => planningStore.currentStep);

const handleBack = () => {
  if (planningStore.currentStep > 1) {
    planningStore.currentStep--;
  }
};
</script>

<style scoped>
.step-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
